<template>
  <div class="xtx-login-page">
    <!-- 登录头部 -->
    <div class="xtx-login-header">
      <h1 class="logo"></h1>
      <router-link class="home" to="/">
        进入网站首页
        <i class="iconfont icon-angle-right"></i>
        <i class="iconfont icon-angle-right"></i>
      </router-link>
    </div>
    <!-- 登录内容 -->
    <div class="xtx-login-main">
      <div class="wrapper">
        <div class="box">
          <div class="tab-nav">
            <a
              @click="loginType='mobile'"
              href="javascript:;"
              :class="{active:loginType==='mobile'}"
            >账户登录</a>
            <a
              @click="loginType='qrcode'"
              href="javascript:;"
              :class="{active:loginType==='qrcode'}"
            >二维码登录</a>
          </div>
          <div class="tab-pane" v-show="this.loginType==='mobile'">
            <div class="xtx-login-form">
              <div class="link">
                <a @click="toggleLogin(false)" v-if="isMsgLogin" href="javascript:;">密码登录</a>
                <a @click="toggleLogin(true)" v-else href="javascript:;">手机验证码登录</a>
              </div>
              <div v-if="isMsgLogin" class="input" :class="{focus:focusField==='mobile',error:errorField==='mobile'}">
                <span class="icon iconfont icon-phone"></span>
                <input
                  ref="mobile"
                  v-model.trim="mobile"
                  @focus="onFocus"
                  @input="checkAll"
                  @blur="checkAll"
                  type="text"
                  :class="{error:errorField==='mobile'}"
                  placeholder="请输入手机号码"
                />
                <span
                  @click="clearValue('mobile')"
                  v-if="mobile"
                  class="clear iconfont icon-shanchu"
                ></span>
              </div>
              <div v-else class="input" :class="{focus:focusField==='account',error:errorField==='account'}">
                <span class="icon iconfont icon-zhanghao"></span>
                <input
                  v-model.trim="account"
                  @focus="onFocus"
                  @input="checkAll"
                  @blur="checkAll"
                  type="text"
                  :class="{error:errorField==='account'}"
                  placeholder="请输入用户名"
                />
                <span
                  @click="clearValue('account')"
                  v-if="mobile"
                  class="clear iconfont icon-shanchu"
                ></span>
              </div>
              <div v-if="isMsgLogin" class="input">
                <span class="icon iconfont icon-code"></span>
                <input
                  ref="code"
                  v-model.trim="code"
                  @focus="onFocus"
                  @input="checkAll"
                  @blur="checkAll"
                  type="text"
                  :class="{error:errorField==='code'}"
                  placeholder="请输入验证码"
                />
                <span @click="sendMsg()" class="send" :class="{sending:timer}">{{downTime}}</span>
                <span
                  @click="clearValue('code')"
                  v-if="code"
                  class="clear r90 iconfont icon-shanchu"
                ></span>
              </div>
              <div
                v-else
                class="input"
                :class="{focus:focusField==='password',error:errorField==='password'}"
              >
                <span class="icon iconfont icon-suo"></span>
                <input
                  ref="password"
                  v-model.trim="password"
                  @focus="onFocus"
                  @blur="checkAll"
                  @input="checkAll"
                  type="password"
                  :class="{error:errorField==='password'}"
                  placeholder="请输入密码"
                />
                <span
                  @click="clearValue('password')"
                  v-if="password"
                  class="clear iconfont icon-shanchu"
                ></span>
              </div>
              <div class="tip" v-if="errorTip">
                <span class="iconfont icon-warning"></span>
                <span>{{errorTip}}</span>
              </div>
              <div class="agree">
                <xtx-checkbox v-model="isAgree" @change="checkAll"></xtx-checkbox>
                <span>我已同意</span>
                <a href="javascript:;">《隐私条款》</a>
                <span>和</span>
                <a href="javascript:;">《服务条款》</a>
              </div>
              <div class="button clearfix">
                <a
                  @click="login()"
                  class="dl"
                  :class="{valid:disabled===false}"
                  href="javascript:;"
                >登 录</a>
                <router-link class="fl" to="/forget">忘记密码？</router-link>
                <a id="qq_login_btn" href="https://graph.qq.com/oauth2.0/authorize?client_id=100556005&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.corho.com%3A8080%2F%23%2Flogin%2Fcallback">
                  <img src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png" alt="">
                </a>
                <router-link class="fr" to="/register">免费注册</router-link>
              </div>
            </div>
          </div>
          <div class="tab-pane" v-show="this.loginType==='qrcode'">
            <img class="code" src="@/assets/images/code.png" alt />
          </div>
        </div>
      </div>
    </div>
    <!-- 登录底部 -->
    <div class="xtx-login-footer">
      <div class="copyright">
        <p>
          <a href="javascript:;">关于我们</a>
          <a href="javascript:;">帮助中心</a>
          <a href="javascript:;">售后服务</a>
          <a href="javascript:;">配送与验收</a>
          <a href="javascript:;">商务合作</a>
          <a href="javascript:;">搜索推荐</a>
          <a href="javascript:;">友情链接</a>
        </p>
        <p>CopyRight &copy; 小兔鲜儿</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'xtx-login-page',
  data () {
    return {
      // 登录类型：mobile 手机号 qrcode 二维码
      loginType: 'mobile',
      // 是否用短信验证码登录
      isMsgLogin: false,
      // 激活的输入框
      focusField: null,
      // 出错的输入框
      errorField: null,
      // 禁用登录按钮
      disabled: true,

      // 登录信息
      account: null,
      password: null,
      mobile: null,
      code: null,
      isAgree: true,
      // 错误提示
      errorTip: null,

      // 短信发送后
      downTime: '发送验证码',
      timer: null
    }
  },
  methods: {
    // 发送验证码
    sendMsg () {
      if (this.checkMobile() && !this.timer) {
        this.$http.get('login/code', { params: { mobile: this.mobile } }).then(() => {
          this.downTime = '60s后重发'
          let time = 60
          this.timer = setInterval(() => {
            time = time - 1
            if (this.time <= 0) {
              window.clearInterval(this.timer)
              this.downTime = '发送验证码'
              this.timer = null
            } else {
              this.downTime = `${time}s后重发`
            }
          }, 1000)
        })
      }
    },
    // 校验账户
    checkAccout () {
      if (!this.account) {
        this.errorTip = '请输入用户名'
        this.errorField = 'account'
        this.disabled = true
        return false
      }
      return true
    },
    // 校验手机号
    checkMobile () {
      if (!this.mobile) {
        this.errorTip = '请输入手机号码'
        this.errorField = 'mobile'
        this.disabled = true
        return false
      }
      if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
        this.errorTip = '手机号码格式不正确'
        this.errorField = 'mobile'
        this.disabled = true
        return false
      }
      return true
    },
    // 校验验证码
    checkCode () {
      if (!this.code) {
        this.errorTip = '请输入验证码'
        this.errorField = 'code'
        this.disabled = true
        return false
      }
      if (!/^\d{6}$/.test(this.code)) {
        this.errorTip = '验证码必须是6个数字'
        this.errorField = 'code'
        this.disabled = true
        return false
      }
      return true
    },
    // 校验密码
    checkPassword () {
      if (!this.password) {
        this.errorTip = '请输入密码'
        this.errorField = 'password'
        this.disabled = true
        return false
      }
      if (!/^.{6,20}$/.test(this.password)) {
        this.errorTip = '密码必须是6-20字符'
        this.errorField = 'password'
        this.disabled = true
        return false
      }
      return true
    },
    // 校验函数
    checkAll () {
      this.focusField = null
      // 进行校验
      if (this.isMsgLogin) {
        if (!this.checkMobile()) return
        if (!this.checkCode()) return
      } else {
        if (!this.checkAccout()) return
        if (!this.checkPassword()) return
      }
      if (!this.isAgree) {
        this.errorTip = '必须同意隐私条款和服务条款'
        this.errorField = null
        this.disabled = true
        return
      }
      // 没有错误
      this.errorTip = null
      this.errorField = null
      this.disabled = false
    },
    // 清除校验
    onFocus () {
      this.errorTip = null
      this.errorField = null
    },
    // 清除数据
    clearValue (field) {
      this[field] = null
      this.$refs[field].focus()
    },
    // 切换登录验证方式（密码|短信）
    toggleLogin (isMsgLogin) {
      this.isMsgLogin = isMsgLogin
      this.mobile = null
      this.code = null
      this.account = null
      this.password = null
      this.errorTip = null
      this.errorField = null
      this.disabled = true
    },
    // 登录
    login () {
      // 禁用
      if (this.disabled) return
      // 登录
      const { account, mobile, password, code } = this
      this.$http
        .post(
          this.isMsgLogin ? '/login/code' : 'login',
          this.isMsgLogin ? { mobile, code } : { account, password }
        )
        .then(async (res) => {
          this.$store.commit('user/setUser', res.data.result)
          await this.$store.dispatch('cart/mergeCart')
          this.$router.push(this.$route.query.returnUrl || '/member')
        })
    }
  }
}
</script>

<style scoped lang='less'>
@import "./styles/login.less";
#qq_login_btn {
  position: relative;
  top: -4px;
  margin-left: 40px;
}
</style>
